<!--svg测试-->
<template>
  <div>SVG 文件可通过以下标签嵌入 HTML 文档 embed/object/iframe。</div>
  <div>1、embed标签被所有主流的浏览器支持，并允许使用脚本</div>
  <embed
    :src="svg1"
    width="300"
    height="100"
    type="image/svg+xml"
    pluginspage="http://www.adobe.com/svg/viewer/install/"
  />
  <div>2、object标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。</div>
  <object
    :data="svg1"
    width="300"
    height="100"
    type="image/svg+xml"
    codebase="http://www.adobe.com/svg/viewer/install/"
  ></object>
  <div>3、iframe 标签可工作在大部分的浏览器中。</div>
  <iframe :src="svg1" width="300" height="100"></iframe>
  <div>SVG 形状 SVG 有一些预定义的形状元素，可被开发者使用和操作：</div>
  <div>矩形 rect 圆形 circle 椭圆 ellipse 线 line 折线 polyline 多边形 polygon 路径 path</div>
  <div>椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。</div>
  <div>polygon 标签用来创建含有不少于三个边的图形。</div>
  <div>
    path标签用来定义路径。 下面的命令可用于路径数据： M = moveto L = lineto H = horizontal lineto V = vertical lineto C
    = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc Z =
    closepath
  </div>
  <div>
    SVG 滤镜用来向形状和文本添加特殊的效果。 feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix
    feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMorphology feOffset feSpecularLighting
    feTile feTurbulence feDistantLight fePointLight feSpotLight
  </div>
  <div>
    SVG 高斯模糊 必须在 defs 标签中定义 SVG 滤镜。 filter 标签的 id
    属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用） filter:url 属性用来把元素链接到滤镜。当链接滤镜
    id 时，必须使用 # 字符 滤镜效果是通过 feGaussianBlur 标签进行定义的。fe 后缀可用于所有的滤镜 feGaussianBlur 标签的
    stdDeviation 属性可定义模糊的程度 in="SourceGraphic" 这个部分定义了由整个图像创建效果
  </div>
  <div>
    SVG 线性渐变 必须在 defs 标签中定义。 linearGradient 可用来定义 SVG 的线性渐变。 linearGradient 标签必须嵌套在 defs
    的内部。defs 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
    线性渐变可被定义为水平、垂直或角形的渐变： 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变 当 x1 和 x2 相等，而
    y1 和 y2 不同时，可创建垂直渐变 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
  </div>
</template>

<script lang="ts" setup>
import svg1 from './xml/demo1.svg'
</script>

<style scoped lang="scss">
div {
  margin: 10px;
}
</style>
